<template lang="pug">
  v-container
    v-card
      v-toolbar(color="purple darken-4" dark dense)
        v-toolbar-title 基本信息
        v-spacer
        v-toolbar-items(v-show="!solo")
          v-btn(text @click="back") 返回
          v-btn(text @click="reset") 重置
          v-btn(text @click="save") 保存
      v-card-text
        v-form(ref="form")
          v-container
            v-row
              v-col(cols="12")
                v-text-field(:label="CustomerLang['name']" v-model="customer.name" :rules="[rules.required]" :error-messages="errorMsg")
              v-col(cols="12")
                v-text-field(:label="CustomerLang['address']" v-model="customer.address" :rules="[rules.required]")
              v-col(cols="12")
                v-text-field(:label="CustomerLang['tel']" v-model="customer.tel")
              v-col(cols="12")
                v-text-field(:label="CustomerLang['email']" v-model="customer.email")
              v-col(cols="12")
                v-text-field(:label="CustomerLang['contact_name']" v-model="customer.contact_name" :rules="[rules.required]")
              v-col(cols="12")
                v-text-field(:label="CustomerLang['contact_tel']" v-model="customer.contact_tel" :rules="[rules.required]")
              v-col(cols="12")
                v-text-field(:label="CustomerLang['contact_email']" v-model="customer.contact_email" :rules="[rules.required]")
              v-col(cols="12")
                v-text-field(:label="CustomerLang['identify_code']" v-model="customer.identify_code")
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import RulesMixin from '@/components/mixins/FormValidateRulesMixin'
  import {Customer, CustomerLang} from '@/store/modules/types/Customer'
  import {mapActions} from 'vuex'
  import {AxiosPromise, AxiosResponse} from 'axios'
  import {clone} from 'lodash'

  export default (Vue as VueConstructor<Vue & {
    customer: Customer,
    create: (customer: Customer) => AxiosPromise,
    update: (customer: Customer) => AxiosPromise
  }>).extend({
    props: ['customer', 'solo'],
    name: 'customer_form',
    mixins: [RulesMixin],
    methods: {
      ...mapActions('customer', ['create', 'update']),
      back() {
        this.$emit('toggleModel', 'view')
      },
      save() {
        if (this.$refs.form.validate()) {
          this.$loading('保存中...')
          let postAction = this.customer.id ? this.update : this.create
          return postAction(this.customer).then((response: AxiosResponse) => {
            if (!response.data.error) {
              this.customer = Object.assign(this.customer, response.data.customer)
              this.original = clone(this.customer)
              if (!this.solo) {
                this.$msgBox('保存成功')
              }
              return Promise.resolve(response.data.customer)
            } else {
              this.errorMsg = response.data.message
              this.$msgBox('保存失败 ' + response.data.message)
              return Promise.reject()
            }
          }).finally(this.$loading.close)
        }
        return Promise.reject()
      },
      reset() {
        this.customer = Object.assign({}, this.original)
        this.errorMsg = ''
      }
    },
    computed: {
      needRefresh(): boolean {
        return false
      }
    },
    watch: {
      customer: {
        handler(val) {
          this.original = clone(val)
          if (this.$refs.form) {
            this.$refs.form.resetValidation()
          }
        },
        immediate: true
      }
    },
    data() {
      return {
        active: false,
        dirty: false,
        title: '新增客户信息',
        CustomerLang,
        errorMsg: '',
        original: {}
      }
    }
  })
</script>
